<template>
  <div>
    <span @click="showPanel">深入event</span>
    <span @click="showpanel2">深入ModelTest</span>
    <span @click="showpanel3">深入SyncTest</span>
    <span @click="showpanel4">$attrs与$listeners</span>
    <span @click="showpanel5">$children与$parent</span>
    <span @click="showpanel6">作用域插槽scope-slot</span>
    <Event :panelshow="panelshow" @DisplayHide="DisplayHide" />
    <ModelTest :paralyse="paralyse" @xxx="xxx" />
    <SyncTest :add="add" @sss="sss" />
    <AttrsListenersTest :memove="memove" @ccc="ccc" />
    <ChildrenParentTest :memoney="memoney" @jjj="jjj" />
    <ScopeSlotTest :cover="cover" @ttt="ttt" />
    <router-view></router-view>
  </div>
</template>

<script>
import Event from "./Event";
import ModelTest from "./ModelTest";
import SyncTest from "./SyncTest";
import AttrsListenersTest from "./AttrsListenersTest";
import ChildrenParentTest from "./ChildrenParentTest";
import ScopeSlotTest from "./ScopeSlotTest";
export default {
  name: "Communication",
  data() {
    return {
      panelshow: false,
      paralyse: false,
      add: false,
      memove: false,
      memoney: false,
      cover: false,
    };
  },
  components: {
    Event,
    ModelTest,
    SyncTest,
    AttrsListenersTest,
    ChildrenParentTest,
    ScopeSlotTest,
  },
  methods: {
    showPanel() {
      this.panelshow = true;
    },
    showpanel2() {
      this.paralyse = true;
    },
    showpanel3() {
      this.add = true;
    },
    showpanel4() {
      this.memove = true;
    },
    showpanel5() {
      this.memoney = true;
    },
    showpanel6() {
      this.cover = true;
    },
    DisplayHide() {
      this.panelshow = false;
    },
    xxx() {
      this.paralyse = false;
    },
    sss() {
      this.add = false;
    },
    ccc() {
      this.memove = false;
    },
    jjj() {
      this.memoney = false;
    },
    ttt() {
      this.cover = false;
    },
  },
};
</script>

<style lang="less" scoped>
span {
  font-size: 20px;
  margin-left: 10px;
}
span:hover {
  color: red;
}
</style>
